<template>
  <section v-if="showEditAd">
    <el-row>
      <el-button size="mini" type="text" @click="backBtn">
        <<< 返回
      </el-button>
    </el-row>
    <edit-ads :adPosition="currAdPosition"></edit-ads>
  </section>
  <section v-else>
    <el-form label-width="80px" inline style="border: 0px solid red">
      <el-form-item label="" style="border: 0px solid red;">
        <el-row style="display: flex;flex-direction: row;width: 100%">
          <filter-tool class="filtertool" type="adTypeId" test="name" v-on:confirm="filterEvent"></filter-tool>
          <filter-tool class="filtertool" type="clientId" test="clientName" v-on:confirm="filterEvent"></filter-tool>
        </el-row>
      </el-form-item>
      <el-form-item label="" style="border: 0px solid red;">
        <search-tool v-on:search="searchEvent"></search-tool>
      </el-form-item>
      <el-form-item label="" style="border: 0px solid red;float: right">
        <el-button size="mini" @click="addAdPositionBtn" type="primary" icon="el-icon-plus"/>
      </el-form-item>
    </el-form>
    <el-table :data="adPositionList">
      <el-table-column type="index" label="序号"/>
      <el-table-column label="标题" prop="description"/>
      <el-table-column label="类型" prop="adType.name"/>
      <el-table-column label="位置" prop="position"/>
      <el-table-column label="详情">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="setAdBtn(scope.row)">设置</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="editBtn(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="delBtn(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-show="totalPage>0" style="margin-top:20px;" small
                   layout="prev, pager, next"
                   :page-count="totalPage"
                   @current-change="goPage">
    </el-pagination>
    <el-dialog :visible.sync="editDialog" v-if="editDialog" :title="currAdPosition.id?'编辑':'新建'">
      <edit-position :adPosition="currAdPosition" v-on:save="saveAdPositionBtn"></edit-position>
    </el-dialog>
  </section>
</template>

<script>
  import batchTool from '@/common/batchTool'
  import searchTool from '@/common/searchTool'
  import filterTool from '@/common/filterTool'
  import editAds from '../setAd/index'
  import editPosition from './editPosition'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "index",
    components:{editPosition,editAds,filterTool,searchTool,batchTool},
    data(){
      return {
        adPositionList:null,
        currAdPosition:null,
        editDialog:false,
        showEditAd:false,
        totalPage:0,
        filterObj:{},
      }
    },
    created(){
      this.getAdPositionList()
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      filterEvent(e,objK){
        console.log('筛选条事件---------',e,objK)
        for(let key in e){
          if(objK === undefined) this.filterObj[key]=e[key]
          else this.filterObj[objK]=e[key]
        }
        console.log('看下filterObj----------',this.filterObj)
        let tmp={}
        for(let k in this.filterObj){
          if(this.filterObj[k] !== undefined){
            tmp[k]=this.filterObj[k]
          }
        }
        console.log('看下tmp----------',tmp)
        this.getAdPositionList(0,tmp)//筛选出库单列表
      },
      searchEvent(e){
        this.filterObj.key=e
        this.getAdPositionList(0,this.filterObj)//搜索出库单列表
      },
      backBtn(){
        this.currAdPosition=null
        this.showEditAd=false
      },
      goPage(val){
        this.getAdPositionList(val-1,this.filterObj)
      },
      getAdPositionList(pageNo,filterObj){
        //获取广告位列表
        this.fetch({name:"getAdPositionList",data:{page:pageNo?pageNo:0,...filterObj}})
          .then(res=>{
            console.log(res)
            this.adPositionList=res.content
            this.totalPage=res.totalPages
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      addAdPositionBtn(){
        //新增广告位，新建一个空对象，跳出编辑dialog
        this.currAdPosition={data:{storeAd:false}}
        this.editDialog=true
      },
      editBtn(row){
        //编辑广告位，整理编辑时需要的对象，跳出编辑dialog
        // let tmp=row.position.split('_')
        this.currAdPosition={id:row.id,adTypeId:row.adType.id,description:row.description,cId:row.clientId,position:row.position,data:row.data}
        this.editDialog=true
      },
      saveAdPositionBtn(e){
        console.log(e)
        // if(e.data.storeAd){
        //   e.position='store_'+e.position
        // }else {
        //   e.position='index_'+e.position
        // }
        if(e.id){
          //保存
          this.updateAdPosition(e)
        }else {
          //新建
          this.createAdPosition(e)
        }
      },
      createAdPosition(data){
        this.fetch({name:"createAdPosition",data})
          .then(res=>{
            console.log(res)
            this.$message({type:'success',message:'创建成功！'})
            this.getAdPositionList()
            this.editDialog=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      updateAdPosition(data){
        this.fetch({name:"updateAdPosition",data})
          .then(res=>{
            console.log(res)
            this.$message({type:'success',message:'保存成功！'})
            this.getAdPositionList()
            this.editDialog=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      delBtn(row){
        this.$confirm('确认删除？')
          .then(()=> {
            this.fetch({name:"deleteAdPosition",data:{id:row.id}})
              .then(res=>{
                console.log(res)
                this.getAdPositionList()
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
      setAdBtn(row){
        this.currAdPosition=row
        this.showEditAd=true
      }
    }
  }
</script>

<style scoped>

</style>
